<template>
  <!-- 近七日数据趋势 -->
  <SectionContainer class="u-p30">
    <SectionTitle>近七日数据趋势</SectionTitle>
    <ChartLine
      v-if="weekDataVisible"
      :data="weekDataOptions"
    ></ChartLine>
  </SectionContainer>
</template>

<script>
import Moment from "moment";

import SectionTitle from "@/components/section-title";
import SectionContainer from "@/components/section-container";
import ChartLine from "@/components/chart-line";

import { sessionStorage } from "@/utils";

import { fetchHomeWeekData } from "@/api";

export default {
  components: {
    SectionTitle,
    SectionContainer,
    ChartLine
  },
  data() {
    return {
      user: sessionStorage.get("USER"),
      weekData: [],
      weekDataVisible: true
    };
  },
  computed: {
    weekDataOptions() {
      let ret = {
        legend: {
          left: "center",
          selectedMode: "single"
        },
        xAxis: [],
        series: [
          {
            name: "点击数",
            data: []
          },
          {
            name: "曝光数",
            data: []
          },
          {
            name: "点击率",
            data: []
          },
          {
            name: "点击均价",
            data: []
          },
          {
            name: "千次曝光均价",
            data: []
          },
          {
            name: "总消耗",
            data: []
          }
        ]
      };
      this.weekData.forEach(item => {
        ret.xAxis.push(item.reportTime);
        [
          "clickNumber",
          "displayNumber",
          "clickRate",
          "cpcAveragePrice",
          "cpmAveragePrice",
          "biddingPrice"
        ].forEach((serie, index) => {
          ret.series[index].type = "line";
          ret.series[index].smooth = true;
          ret.series[index].itemStyle = {
            normal: { areaStyle: { type: "default" } }
          };
          ret.series[index].data.push(item[serie]);
        });
      });
      return ret;
    }
  },
  methods: {
    // 默认七日数据
    getDefaultWeekData(data) {
      // 请求获取的数据
      let xhrData = {};
      data.forEach(item => {
        xhrData[item.reportTime] = item;
      });

      // 默认数据
      let defaultData = {};
      for (let i = 1; i < 8; i++) {
        let reportTime = Moment()
          .subtract(i, "days")
          .format("YYYY-MM-DD");
        defaultData[reportTime] = {
          reportTime,
          clickNumber: 0,
          displayNumber: 0,
          clickRate: 0,
          cpcAveragePrice: 0,
          cpmAveragePrice: 0,
          biddingPrice: 0
        };
      }

      // 合并数7日数据
      return Object.values({ ...defaultData, ...xhrData }).reverse();
    },
    // 近七日数据
    fetchHomeWeekData() {
      this.weekDataVisible = false;
      fetchHomeWeekData({
        query: {
          userId: this.user.userId
        }
      }).then(res => {
        this.weekData = this.getDefaultWeekData(res.data);
        this.weekDataVisible = true;
      });
    }
  },
  created() {
    this.fetchHomeWeekData();
  }
};
</script>